<template>
  <div class="rolesbox">
    <el-row class="btn">
      <el-col :span="3">
        <el-button type="success">添加角色</el-button>
      </el-col>
    </el-row>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column type="expand">
        <template #default="{ row }">
          <div class="content">
            <el-row class="first" v-for="first in row.children" :key="first.id">
              <el-col :span="4">
                <el-tag closable>
                  {{ first.authName }}
                </el-tag>
              </el-col>
              <el-col :span="20">
                <el-row class="second" v-for="second in first.children" :key="second.id">
                  <el-tag type="success" closable>{{ second.authName }}</el-tag>
                  <el-col :span="20">
                      <el-tag  class="mx-1 third" v-for="third in second.children" :key="third.id" type="warning" closable>{{ third.authName }}</el-tag>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="#" type="index" width="50"/>
      <el-table-column label="权限名称" prop="roleName" />
      <el-table-column label="权限描述" prop="roleDesc" />
      <el-table-column label="操作" width="150">
        <template #default="{ row }">
          <el-tooltip
            class="box-item"
            effect="dark"
            content="编辑"
            placement="left-start"
          >
          <el-button @click="editRole(row)" type="primary" :icon="'User'" circle />
          </el-tooltip>
          <el-tooltip
            class="box-item"
            effect="dark"
            content="角色授权"
            placement="top"
          >
            <el-button type="success" @click="rightRole(row)" :icon="'Check'" circle />
          </el-tooltip>

          <el-popconfirm title="真的要删除这个用户吗？" >
            <template #reference>
              <el-button type="danger" :icon="'Delete'" circle />
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  <!-- 编辑角色对话框 -->
  <el-dialog v-model="roleDialog" title="编辑角色">
    <el-form
    :model="roleInfo"
    label-width='100px'
    ref="formRef"
    >
      <el-form-item label="角色名称：" prop="rolename">
        <el-input v-model="roleInfo.rolename" type="text" />
      </el-form-item>
      <el-form-item label="角色描述：" prop="roledesc">
        <el-input v-model="roleInfo.roledesc" type="text" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="roleDialog=false">取消</el-button>
        <el-button type="primary" @click="editRoleHandler">确认编辑</el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 角色授权 -->
  <el-dialog v-model="rolerightDialog" title="角色授权">
    <el-tree
      ref="treeRef"
      :data="rightList"
      show-checkbox
      default-expand-all
      node-key="id"
      highlight-current
      :default-checked-keys="defaultCheck"
      :props="{ label: 'authName', children : 'children' }"
    />
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="rolerightDialog=false">取消</el-button>
        <el-button type="primary" @click="rightRoleHandler">确认编辑</el-button>
      </span>
    </template>
  </el-dialog>
  </div>
</template>

<script>
import { ElMessage } from 'element-plus'
export default {
  name: 'oaRoles',
  data () {
    return {
      tableData: [],
      roleInfo: {},
      roleDialog: false,
      rolerightDialog: false,
      rightList: [],
      defaultCheck: [],
      roleId: 0
    }
  },
  methods: {
    async getRoleList () {
      const roleList = await this.$http.get('roles')
      if (roleList.meta?.status !== 200) return
      this.tableData = roleList.data
    },
    // 编辑角色
    editRole (info) {
      this.roleInfo.id = info.id
      this.roleInfo.rolename = info.roleName
      this.roleInfo.roledesc = info.roleDesc
      this.roleDialog = true
    },
    // 确定编辑
    async editRoleHandler () {
      const role = await this.$http.put(`roles/${this.roleInfo.id}`, { roleName: this.roleInfo.rolename, roleDesc: this.roleInfo.roledesc })

      if (role.meta.status !== 200) return
      this.getRoleList()
      this.roleDialog = false
    },
    // 角色授权
    async rightRole (info) {
      // 所有权限列表
      const roleTree = await this.$http.get('rights/tree')
      if (roleTree.meta.status !== 200) return
      this.rightList = roleTree.data
      this.rolerightDialog = true

      // 获取当前用户权限，打开对话框时默认选中，赋值给defaultCheck
      // 为了this指向，将function改为箭头函数
      const thirdrole = list => {
        list.forEach(item => {
          if (item.children) {
            thirdrole(item.children)
          } else {
            this.defaultCheck.push(item.id)
          }
        })
      }
      thirdrole(info.children)
      this.roleId = info.id
    },
    // 确定角色授权
    async rightRoleHandler () {
      // getHalfCheckedKeys 和  getCheckedKeys 是element plus 自带的 节点选中时能够获得节点组成的数组
      const parentNode = this.$refs.treeRef.getHalfCheckedKeys()
      const childrenNode = this.$refs.treeRef.getCheckedKeys()
      const rids = [...parentNode, ...childrenNode].toString()

      const res = await this.$http.post(`roles/${this.roleId}/rights`, { rids })
      if (res.meta.status !== 200) return

      ElMessage({
        showClose: true,
        message: '角色授权成功!',
        type: 'success'
      })
      this.getRoleList()
      this.rolerightDialog = false
    }
  },
  created () {
    this.getRoleList()
  }
}
</script>

<style scoped lang="scss">
.rolesbox{
  .btn{
    margin-bottom: 5px;
  }
}
.content{
  padding-left: 10px;
  .first, .second{
    margin-bottom: 5px;
  }
  .third{
    margin: 5px 10px;
  }
}

</style>
